Element 导航菜单 NavMenu 根据当前路由路径设置相应菜单项被选中 发表于 2019-10-20 | 分类于 vue 字数统计: 280 word | 阅读时长 ≈ 1 min Element 导航菜单 NavMenu 根据当前路由路径设置相应菜单项被选中思路 NavMenu菜单有个属性为 default-active ,是当前激活菜单的Index,因此只需要通过 $route.path 获取路由路径,在加以判断,重新给default-active 指定值即可。 12345678910111213141516171819202122<div> <el-menu :default-active="activeIndex($route.path)" :router="true" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-menu-item index="/home/index"> <i class="fa fa-wa fa-cny"></i>首页 </el-menu-item> <el-menu-item index="/home/myorder"> <i class="fa fa-wa fa-users"></i> 我的订单 </el-menu-item> <el-menu-item index="/home/tobuy"> <i class="fa fa-wa fa-pencil"></i> 我要订购 </el-menu-item> </el-menu> </div> 123456789101112131415 methods: { activeIndex(path) { console.log(path); if (path.indexOf("/index") != -1) { console.log("111111"); return "/home/index"; } else if (path.indexOf("/myorder") != -1) { console.log("22222"); return "/home/myorder"; } else if (path.indexOf("/tobuy") != -1) { console.log("33333"); return "/home/tobuy"; } }}